<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>ajax和json综合</h1>
<!--
    获取好友列表
-->
<input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
<hr>
<h3>好友列表</h3>
<!--存放查询好友的结果信息-->
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <!--<tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>-->

</table>

</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
      需求：向后台发送请求，获取好友列表并显示到页面中
      说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"
     */

     function method01() {
        //向后台发送请求
        /*
            resp.data的数据:
            resp.data={flag: true,
                       message: "查询好友列表成功",
                       valueData: [{age: 18, id: '001', name: '张三'},
                                   {age: 19, id: '002', name: '李四'},
                                   {age: 20, id: '003', name: '王五'}]
            }
        */
        axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
             .then(resp => {
                // console.log(resp.data);
                //1. 将后端响应的数据使用变量接收
                let obj = resp.data;
                //2. 判断查询是否成功
                if(obj.flag) {
                    //成功
                    //3.将响应的信息放到标签<div id="messageDiv"></div>
                    document.getElementById("messageDiv").innerHTML=obj.message;
                    //4.将响应的好友列表信息放到上面的table标签文本中
                    //4.1 定义变量保存从后台数组中取出的数据
                    let content="";//TODO 这里必须给初始化值空字符串
                    //4.2 遍历数组取出每一个好友数据
                    //TODO friend代表obj.valueData数组中每个json对象,即{age: 18, id: '001', name: '张三'} ...
                    for(let friend of obj.valueData){
                        //4.3 取出friend中的值并放到对应的tr td标签中,最后拼接到变量content
                        /*
                            第一次循环:
                                friend={age: 18, id: '001', name: '张三'}
                                content=""+`<tr>
                                                <td>18</td>
                                                <td>001</td>
                                                <td>张三</td>
                                            </tr>`;
                                         第一次循环结束后:
                                            content=`<tr>
                                                        <td>18</td>
                                                        <td>001</td>
                                                        <td>张三</td>
                                                    </tr>`;
                            第二次循环:
                                friend={age: 19, id: '002', name: '李四'}
                                content=`<tr>
                                            <td>18</td>
                                            <td>001</td>
                                            <td>张三</td>
                                         </tr>` +
                                        `<tr>
                                            <td>19</td>
                                            <td>002</td>
                                            <td>李四</td>
                                         </tr>`    
                                         第二次循环结束后:
                                            content=`<tr>
                                                        <td>18</td>
                                                        <td>001</td>
                                                        <td>张三</td>
                                                    </tr>
                                                        <tr>
                                                        <td>19</td>
                                                        <td>002</td>
                                                        <td>李四</td>
                                                    </tr>`             
                        */


                        content=content+`<tr>
                                            <td>${friend.id}</td>
                                            <td>${friend.name}</td>
                                            <td>${friend.age}</td>
                                         </tr>`;
                    }
                    //TODO 循环结束
                    //4.4获取table标签对象
                    let objTable = document.getElementById("myTable");
                    //4.5将上述content内容放到table表签文本中
                    objTable.innerHTML+=content//TODO 这里必须是 +=,不能是=, 因为要保留table原有的内容(表头)
                } else {
                    document.getElementById("messageDiv").innerHTML=obj.message;
                }
             })
    }
</script>

</html>